<template>
  <div class="page-common">
    <slide :imgs="lunbotulist"></slide>
    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <ul>
        <li class="price">
          市场价: <s>￥{{info.price}}</s>    销售价：<span>￥{{info.price}}</span>
        </li>
        <li class="inputli">
          购买数量：
          <!--实现数量增加的组件-->
          <inputnumber  v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          <transition name="show"
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="AfterEnter">
            <div class="ball" v-if="isshow"></div>
          </transition>
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号：{{info.supplierId}}</li>
        <li>库存情况：{{info.stock_quantity }}件</li>
        <li>上架时间：{{info.upDate | datefmt('YYYY-MM-DD')}}</li>
      </ul>
    </div>
    <!--3.0 图文详情-->
·
    <!--4.0 商品评论-->
    <!--这里因为是通过button跳转的，跳转必须是路由，所以必须单独建一个组件，传值过去，子组件不能跳转-->
    <div id="other">
      <!--按钮也是可以用router-link-->
      <router-link v-bind="{to:'/good/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <router-link v-bind="{to:'/good/goodscomment/' + id}" >
      <mt-button type="danger" size="large">商品评论</mt-button>
      </router-link>
    </div>
  </div>
</template>
<script>
  import slide from '../components/slide'
  import inputnumber from '../components/inputnumber'
//  导入实例
  import {vm,COUNTSTR} from '../kits/vm.js'
  import {addData,valueObj} from '../kits/localStr.js'
  export default {
    data() {
      return {
        id:0 , //商品id
        lunbotulist:[],
        info:[],
        inputNumberCount:1,
        isshow:false  //控制小球的显示状态
      }
    },
    components: {
      slide,
      inputnumber
    },
    methods:{
      getlistinfo(){
        this.axios.get("../static/goodinfophotolist.json",{}).then(res => this.lunbotulist = res.data.imgUrl);
      },
      getlistdata(){
        let that = this;
        that.axios.get("../static/getgoodlist.json", {}).then(function (res) {
          that.info = res.data.data.productList[0].item[0];
//            console.log(that.info);
        });
      },
//      获取inputNumber 组件中传入的值
      getcount(count){
//          console.log(count);
          this.inputNumberCount = count;

      },
//      加入购物车
      toshopcar(){
//          1.0加入购物车
          vm.$emit(COUNTSTR,this.inputNumberCount);
//          2.0将数据保存到localstroange
        valueObj.productId = this.id;
        valueObj.count = this.inputNumberCount;
        addData(valueObj);
//        3.0 实现小球动画
        this.isshow = !this.isshow;
      },
//      定义动画方法
      beforeEnter(el){
//         设定小球的初始位置
        el.style.transform = "translate(0px,0px)";
      },
      enter(el,done){
//保证小球出现动画
        el.offsetHeight;
//        设置小球的出现位置
        el.style.transform = "translate(5px,267px)";
        done();
      },
      AfterEnter(el){
        this.isshow = !this.isshow;
//        结束动画
      }
    },
    created(){
//        获取url商品id值
      this.id = this.$route.params.id;
      this.getlistinfo();
      this.getlistdata();
    },
  }
//  组件为了适应页面的使用，所以在slide.vue组件中进行展示，数据仅仅是父子组件的传值问题，谁使用这个组件，谁就传这个值过去
//
</script>
<style scoped>
  #buy,#params,#other
  {
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
  }
  .line{
    height: 1px;
    border: 1px solid rgba(0,0,0,0.2);
  }
  #buy ul,#params ul{
    padding-left: 0px;
  }
  #buy h4{
    color:#0094ff;
    padding: 5px;
  }
  #buy li,#params li{
    list-style: none;
    padding: 8px;
  }

  #buy .price span{
    color:#ff7555;
  }
  .inputli{
    position: relative;
  }
  .ball{
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left:214px;
    top:20px;
    z-index: 100;
    transition: all 0.4s ease;
  }
  #other .imgdesc{
    margin-bottom: 20px;
  }
</style>
